/*
function DrawGant(){
    var canvas =document.getElementById("myCanvas");
    
    if(canvas != null){
        var ctx=canvas.getContext("2d");
        
        var width = canvas.width;
        var height = canvas.height;
        
        ctx.fillStyle="#d2f9f7";
        ctx.fillRect(0,0,width,height);   
        
        var taskHeight = 5;
        
        var daysCount = 30;
        var dayWidth = width / daysCount;
        
        var taskCount = 3;
        
        var days1 = 8;
        var days2 = 15;
        var days3 = 20;
        
        ctx.fillStyle="#f09114";
        ctx.textBaseline = 'middle';
        ctx.font='italic 8pt Calibri';
        
        var taskWidth = days1 * dayWidth;
        ctx.fillRect(0, 0, taskWidth, taskHeight);
        ctx.strokeText("Tarea 1", 0,5);
        
        taskWidth = days2 * dayWidth;
        ctx.fillRect(3 * dayWidth, 10, taskWidth, taskHeight);
        
        taskWidth = days3 * dayWidth;
        ctx.fillRect(0, 20, taskWidth, taskHeight);   
    }
}
*/

var projecName;
var textoProyecto;
var namesProjects;

function getParam(name){  
    name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");  
    var regexS = "[\\?&]"+name+"=([^&#]*)";  
    var regex = new RegExp( regexS );  
    var results = regex.exec(window.location.href);
    if(results == null)
        return "";  
    else    
        return results[1];
}

function getUrlData(){
    projectName = getParam("projectName");
    namesProjects = getParam("projects");
    textoProyecto = Android.loadProjectWithName(projectName);
}

function displayBackButton(){
    getUrlData();
    document.write("<a data-theme=\"a\" data-mini=\"true\" data-inline=\"true\" data-icon=\"back\" data-role=\"button\" rel=\"external\" href=\"contenido.jsp?projects="+ namesProjects + "\" > Atr&aacute;s </a>");
}

function displayEditOptions(project_Name){
    namesProjects = getParam("projects");
    
    document.write("<br/>");
    document.write("<a rel=\"external\" href=\"agregarTarea.jsp?projectName="   + project_Name + "&projects=" + namesProjects + "\" data-theme=\"a\" data-role=\"button\" data-icon=\"plus\" data-mini=\"true\" data-inline=\"true\">Agregar tarea</a>");
    document.write("<a rel=\"external\" href=\"editarProyecto.jsp?projectName=" + project_Name + "&projects=" + namesProjects +  "\" data-theme=\"a\" data-role=\"button\" data-icon=\"gear\" data-mini=\"true\" data-inline=\"true\">Editar proyecto</a>");
}

function drawGantForProject(projectText){
    var canvas =document.getElementById("myCanvas");
    
    if(canvas != null){
        var ctx=canvas.getContext("2d");
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        var pageTitle=document.getElementById("projectTitle");
                
        // Splits the properties of the project
        var properties = projectText.toString().split('||');
        var projectName = properties[0];
        var projectDescription = properties[1];
        var projectStartDate = properties[2];
        var projectFinishDate = properties[3];
        var daysCount = properties[4];
        var taskList = properties[5].split('--');
        var length = taskList.length;
        
        //var taskHeight = height / (length * 1.2) ;
        var taskHeight = 30;
        
        ctx.canvas.width  = window.innerWidth;
        ctx.canvas.style.width = '100%';
        ctx.canvas.height = taskHeight * 2 * length ;
        
        var width = canvas.width;
        var height = canvas.height;
        
        // previous values
        var lineJoin = ctx.lineJoin;
        var lineWidth = ctx.lineWidth;
        var fillStyle = ctx.fillStyle;
        var strokeStyle = ctx.strokeStyle ;
        
        // fondo
        ctx.fillStyle="#64A8D1";
        ctx.fillRect(0,0,width,height);
        
        
        // linea divisora izquierda
        ctx.beginPath();
        ctx.moveTo(width * 0.25, 0);
        ctx.lineTo(width * 0.25, height);
        ctx.stroke();
        
        // linea divisora derecha
        ctx.beginPath();
        ctx.moveTo(width * 0.75, 0);
        ctx.lineTo(width * 0.75, height);
        ctx.stroke();
        
        
        // linea divisora centro
        ctx.strokeStyle = "#FF0000";
        ctx.beginPath();
        ctx.moveTo(width / 2, 0);
        ctx.lineTo(width / 2, height);
        ctx.stroke();
        
        // Sets the title to the project name
        pageTitle.innerHTML = projectName.toString();
        
        // Sets the dates
        var tdStartDate = document.getElementById("startDate");
        var tdFinishDate = document.getElementById("finishDate");
        
        tdStartDate.innerHTML = projectStartDate;
        tdFinishDate.innerHTML = projectFinishDate;
        
        // Sets the width of each day in the canvas
        var dayWidth = width / daysCount ;
        var y = 15;
        
        // barras
        //ctx.fillStyle="#03436A";
        //ctx.strokeStyle = "#03436A";
        
        ctx.textBaseline = 'middle';
        ctx.font='italic 10pt Calibri';
        
        var cornerRadius = 20; 
        
        for (var i=0; i<length-1; i++){ 
            // Split properties of each task
            
            var task = taskList[i].split('|');
            var taskName = task[0];
            var taskDescription = task[1];
            var taskStartDate = task[2];
            var taskFinishDate = task[3];
            var daysLength = task[4];
            var daysAfterStart = task[5];
            var percentage = parseFloat(task[6]);
            
            // Paintd in the canvas the current task
            var taskWidth = daysLength * dayWidth;
            var taskIndent = daysAfterStart * dayWidth;
            //ctx.fillRect(taskIndent, y, taskWidth, taskHeight);
            
            // Texto 
            ctx.lineJoin = lineJoin;
            ctx.lineWidth = lineWidth;
            ctx.fillStyle= fillStyle;
            ctx.strokeStyle = strokeStyle;
            ctx.strokeText(taskName.toString(), taskIndent +8,y + 45 /*6*/);
            
            // Barras
            ctx.lineJoin = "round";
            ctx.lineWidth = cornerRadius;
            ctx.fillStyle="#03436A";
            ctx.strokeStyle = "#03436A";
            
            ctx.strokeRect(taskIndent+(cornerRadius/2), y+(cornerRadius/2), taskWidth-cornerRadius, taskHeight-cornerRadius);
            ctx.fillRect(taskIndent+(cornerRadius/2), y+(cornerRadius/2), taskWidth-cornerRadius, taskHeight-cornerRadius);
            
            
            // draws percentage bars
            // red
            if( percentage  < 33 ){
                ctx.fillStyle="#e6523e";
                ctx.strokeStyle = "#e6523e";
            }else{
                // Orange
                if( percentage  < 66 ){
                    ctx.fillStyle="#f1a727";
                    ctx.strokeStyle = "#f1a727";    
                }else{
                    // Green
                    ctx.fillStyle="#389E28";
                    ctx.strokeStyle = "#389E28";    
                }
            }
            
            taskWidth = percentage * taskWidth / 100;
            
            ctx.strokeRect(taskIndent+(cornerRadius/2), y+(cornerRadius/2), taskWidth-cornerRadius, taskHeight-cornerRadius);
            ctx.fillRect(taskIndent+(cornerRadius/2), y+(cornerRadius/2), taskWidth-cornerRadius, taskHeight-cornerRadius);
            
            // draws percentage Texto 
            ctx.lineJoin = lineJoin;
            ctx.lineWidth = lineWidth;
            ctx.fillStyle= fillStyle;
            ctx.strokeStyle = strokeStyle;
            ctx.strokeText(percentage.toString().concat("%"), taskIndent +8, y + 16 /*6*/);
            
            y = y + (taskHeight * 2);            
        }
        
        // drawing lines for days
        for(var i = 0; i < daysCount * 2; i++){
            ctx.beginPath();
            ctx.moveTo(i * dayWidth / 2, 0);
            ctx.lineTo(i * dayWidth / 2, 3);
            ctx.stroke();
        }
    }
    
}

$(window).on('resize', function(){
    drawGantForProject(textoProyecto);
//drawGantForProject("Proyecto de prueba||Esto es un proyecto de prueba||31-10-2013||30-11-2013||30||Tarea 1|description|31-10-2013|10-11-2013|10|0|--Tarea 2|description2|31-10-2013|05-11-2013|5|0|--Tarea 3|description2|05-11-2013|10-11-2013|5|5|--Tarea 4|description2|12-11-2013|20-11-2013|8|12|--Tarea 5|description3|18-11-2013|01-12-2013|13|18|--Tarea 1|description|31-10-2013|10-11-2013|10|0|--Tarea 2|description2|31-10-2013|05-11-2013|5|0|--Tarea 3|description2|05-11-2013|10-11-2013|5|5|--Tarea 4|description2|12-11-2013|20-11-2013|8|12|--Tarea 5|description3|18-11-2013|01-12-2013|13|18|--Tarea 1|description|31-10-2013|10-11-2013|10|0|--Tarea 2|description2|31-10-2013|05-11-2013|5|0|--Tarea 3|description2|05-11-2013|10-11-2013|5|5|--Tarea 4|description2|12-11-2013|20-11-2013|8|12|--Tarea 5|description3|18-11-2013|01-12-2013|13|18|--Tarea 1|description|31-10-2013|10-11-2013|10|0|--Tarea 2|description2|31-10-2013|05-11-2013|5|0|--Tarea 3|description2|05-11-2013|10-11-2013|5|5|--Tarea 4|description2|12-11-2013|20-11-2013|8|12|--Tarea 5|description3|18-11-2013|01-12-2013|13|18|--Tarea 1|description|31-10-2013|10-11-2013|10|0|--Tarea 2|description2|31-10-2013|05-11-2013|5|0|--Tarea 3|description2|05-11-2013|10-11-2013|5|5|--Tarea 4|description2|12-11-2013|20-11-2013|8|12|--Tarea 5|description3|18-11-2013|01-12-2013|13|18|--");
})

//------------------------------------------------------------------------------------------
//------- FUNCIONES TABLA ------------------------------------------------------------------
function showTable(projectToShow){
    projectText = Android.loadProjectWithName(projectToShow);
    
    properties = projectText.toString().split('||');
    var projectName = properties[0];
    var projectDescription = properties[1];
    var projectStartDate = properties[2];
    var projectFinishDate = properties[3];     
    
    var taskList = properties[5].split('--');
    var length = taskList.length;
        
    document.write("<div>");
    document.write("Descripci&oacute;n: "+ projectDescription+"<br/>");
    document.write("Fecha inicio: "+ projectStartDate+"<br/>");
    document.write("Fecha fin: "+ projectFinishDate+"<br/>");
    document.write("</div>");
        
    if (length > 0){
        namesProjects = getParam("projects");
        
        document.write("<table font-size:15pt; >");
        document.write("<th>Nombre</th> <th>Inicio</th> <th>Fin</th> <th>%</th> <th>Editar</th>");
        for(i=0; i<length-1; i++){
            var array = taskList[i].split('|');
            document.write("<tr>");
            
            var taskName = array[0];
            var taskDescription = array[1];
            var taskStart = array[2];
            var taskFinish = array[3];
            var taskPercentage = array[6];
                
            document.write("<td>"+taskName+"</td> ");
            document.write("<td>"+taskStart+"</td> ");
            document.write("<td>"+taskFinish+"</td> ");
            document.write("<td>"+taskPercentage+"%</td> ");
                
            var taskInfo = taskName+"||"+taskDescription+"||"+taskStart+"||"+taskFinish+"||"+taskPercentage;
                
            var text ="<td><a rel=\"external\" href=\"editarTarea.jsp?taskInfo=" +taskInfo+ "&projectName=" + projectToShow + "&projects=" + namesProjects + "\" data-role=\"button\" data-icon=\"gear\" data-iconpos=\"notext\"></a></td>";
                
            document.write(text);
            
            document.write("</tr>");
        }
        document.write("</table>");
    }
}
